<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级列表添加</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        text-align: center;
        margin: 50px 0;


    }

    .box input,
    #btn {
        height: 30px;
        padding-left: 10px;
    }

    table {
        width: 800px;
        border: 1px solid #222;
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 auto;
    }

    table caption {
        margin-bottom: 20px;
        font-size: 20px;
    }

    table th,
    table td {
        border: 1px solid #222;
        padding: 5px 0;
        text-align: center;
    }

    table th {
        padding: 10px 0;
    }
</style>

<body>
    <div class="box">
        <label for="num">编号</label>
        <input type="text" id="num" placeholder="1005" onkeydown="getXingMing()" name="bianhao">
        <!-- 调用 获焦函数  -->

        <label for="name">姓名</label>
        <input type="text" id="name" placeholder="燕青" onkeydown="getXingBie()" name="xingming">

        <label for="sex">性别</label>
        <input type="text" id="sex" placeholder="男" name="xingbie">

        <label for="sc">删除</label>
        <input type="text" value="删除" id="sc" disabled=true>
        <!-- disabled=true  使样式 变成灰色 不可选中 -->

        <button id="btn">添加</button>
    </div>

    <div style="margin: 0 auto;">

        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <!-- <tr class="tr">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>

    </div>


    <script>
        function getXingMing(e) {
            e = e || window.event;  // 兼容 

            if (e.keyCode == 13) {   // 检测 按键 是否 为 enter 13
                document.getElementsByName('xingming')[0].focus();   // 使 xingming 输入框 获得焦点
            }
        }
        function getXingBie(e) {
            e = e || window.event;  // 兼容

            if (e.keyCode == 13) {
                document.getElementsByName('xingbie')[0].focus();
            }
        }

        // 定义初始 数据
        var data = [
            { num: 1001, name: '宋公明', sex: '男', sc: '<a href="javascript:;" class="del">删除</a>' },
            { num: 1002, name: '卢俊义', sex: '男', sc: '<a href="javascript:;" class="del">删除</a>' },
            { num: 1003, name: '吴用', sex: '男', sc: '<a href="javascript:;" class="del">删除</a>' },
            { num: 1004, name: '林冲', sex: '男', sc: '<a href="javascript:;" class="del">删除</a>' },
        ]
        // 获取 id
        var num = document.querySelector('#num')
        var n = document.querySelector('#name')
        var sex = document.querySelector('#sex')
        var sc = document.querySelector('#sc')
        var btn = document.querySelector('#btn')
        var tbody = document.querySelector('.tbody')


        //  遍历数组 将初始 数据 编入表格
        for (var i = 0; i < 4; i++) {
            // 创建 tr
            var tr = document.createElement('tr')
            tbody.appendChild(tr)

            for (var k in data[i]) {
                // 创建 td
                var td = document.createElement('td');
                tr.appendChild(td)
                // 将 对象 内容 分发到 相应的 td 中
                td.innerHTML = data[i][k]
            }
        }

        // var dels = document.querySelectorAll('.del');

        // 采用冒泡 的形式 控制 li 点击事件   进行删除 li
        tbody.onclick = function (e) {
            console.log(e);
            console.log(e.target);//单击的目标元素
            if (e.target.className === 'del') {
                e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
            }
        }



        // 设置 btn 点击事件
        btn.onclick = function () {
            // 获取 输入框 内容
            var num1 = num.value;
            var name1 = n.value;
            var sex1 = sex.value;
            var sc1 = sc.value;
            console.log(name1);

            // 将获取的 数据 整合
            var newData = {}
            newData.num = num1
            newData.name = name1
            newData.sex = sex1
            newData.sc = '<a href="javascript:;" class="del">' + sc1 + '</a>'


            // 将数据 push 进 data
            data.push(newData);

            // tbody.innerHTML = ''   // 清空 页面 内容  渲染页面

            for (var i = data.length - 1; i < data.length; i++) {   // 为 表格 最后 添加 tr td

                var tr = document.createElement('tr')
                tbody.appendChild(tr)

                for (var k in data[i]) {

                    var td = document.createElement('td');
                    td.innerHTML = data[i][k]
                    tr.appendChild(td)
                }
            }

            console.log(data);


            // 查询 td
            var td1 = document.querySelectorAll('tr>td')
            console.log(td1);

            /*   尝试 方法
                        // var data1 = data.pop()
                        // data = data.concat(data1)
                        // data.splice(data.length-1, 1)   // 删除 最后一条数据 不保留数组内
             */

            console.log(data);
        }

    </script>


    <!-- #333   上课例子
######################################################################################################### -->


    <!-- 
        5、根据用户输入内容创建员工信息表
      -->
    <div class="box">
        id: <input type="text" id="id">
        用户名：<input type="text" id="username">
        年龄： <input type="text" id="age">
        <input type="button" value="添加" id="btnadd">
    </div>

    <table>
        <caption>员工信息表</caption>
        <thead class="aaa">
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody1">
            <!-- 数据 动态添加 单击一次添加一行 -->
        </tbody>
    </table>
    <script>
        //1.查
        var id = document.querySelector('#id');
        var username = document.querySelector('#username');
        var age = document.querySelector('#age');
        var btnadd = document.querySelector('#btnadd');
        var tbody1 = document.querySelector('#tbody1');
        //2.加事件
        btnadd.onclick = function () {
            if (id.value.trim().length == 0 || username.value.trim().length == 0 || age.value.trim().length == 0) {
                alert('数据不能为空')
            } else {
                //1.创建行
                var tr1 = document.createElement('tr');
                var td1 = document.createElement('td')
                var td2 = document.createElement('td');
                var td3 = document.createElement('td');
                var td4 = document.createElement('td');
                td1.innerHTML = id.value;
                td2.innerHTML = username.value;
                td3.innerHTML = age.value;
                td4.innerHTML = '<a href="javascript:;" class="del1">删除</a>'

                tr1.appendChild(td1);
                tr1.appendChild(td2)
                tr1.appendChild(td3)
                tr1.appendChild(td4)

                tbody1.appendChild(tr1);
                id.value = ''
                username.value = '';
                age.value = ''
            }

        }

        // 做删除操作
        var dels1 = document.querySelectorAll('.del1');
        console.log(dels1);

        // for(var i=0;i<dels.length;i++){
        //      dels[i].onclick=function(){
        //         this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
        //      }
        // }
        // 事件委托   利用的原理冒泡  e事件对象
        tbody1.onclick = function (e) {
            console.log(e);
            console.log(e.target);//单击的目标元素
            if (e.target.className === 'del1') {
                e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
            }

        }



    //    id.value.trim().length==0   表示  很多空格   者没打数据
    </script>
</body>

</html>